<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <view class="container">
        <form @reset="formReset" @submit="formSubmit">

            <!--<tui-list-cell :hover="false">-->
            <!--<view class="tui-line-cell">-->
            <!--<view class="tui-title">性别</view>-->
            <!--<radio-group class="radio-group" name="sex">-->
            <!--<label class="tui-radio">-->
            <!--<radio color="#5677fc" value="1"/>-->
            <!--男-->
            <!--</label>-->
            <!--<label class="tui-radio">-->
            <!--<radio color="#5677fc" value="2"/>-->
            <!--女-->
            <!--</label>-->
            <!--</radio-group>-->
            <!--</view>-->
            <!--</tui-list-cell>-->
            <!--<tui-list-cell :hover="false">-->
            <!--<view class="tui-line-cell self-flex">-->
            <!--<view class="tui-title self-flex-title">年龄</view>-->
            <!--<input class="tui-input self-flex-content" maxlength="50" name="age" placeholder="请输入年龄" placeholder-class="phcolor"-->
            <!--type="number"/>-->
            <!--</view>-->
            <!--</tui-list-cell>-->
            <!--<tui-list-cell :hover="false">-->
            <!--<view class="tui-line-cell self-flex">-->
            <!--<view class="tui-title self-flex-title">手机号</view>-->
            <!--<input class="tui-input self-flex-content" maxlength="50" name="mobile" placeholder="请输入手机号" placeholder-class="phcolor"-->
            <!--type="text"/>-->
            <!--</view>-->
            <!--</tui-list-cell>-->
            <!--<tui-list-cell :hover="false">-->
            <!--<view class="tui-line-cell self-flex">-->
            <!--<view class="tui-title self-flex-title">邮箱</view>-->
            <!--<input class="tui-input self-flex-content" maxlength="50" name="email" placeholder="请输入邮箱" placeholder-class="phcolor"-->
            <!--type="text"/>-->
            <!--</view>-->
            <!--</tui-list-cell>-->
            <!--<tui-list-cell :hover="false">-->
            <!--<view class="tui-line-cell self-flex">-->
            <!--<view class="tui-title self-flex-title">身份证号码</view>-->
            <!--<input class="tui-input self-flex-content" maxlength="50" name="idcard" placeholder="请输入身份证号码" placeholder-class="phcolor"-->
            <!--type="text"/>-->
            <!--</view>-->
            <!--</tui-list-cell>-->
            <!--<tui-list-cell :hover="false">-->
            <!--<view class="tui-line-cell self-flex">-->
            <!--<view class="tui-title self-flex-title">密码</view>-->
            <!--<input class="tui-input self-flex-content" maxlength="50" name="pwd" placeholder="请输入密码" placeholder-class="phcolor"-->
            <!--type="text"/>-->
            <!--</view>-->
            <!--</tui-list-cell>-->
            <!--<tui-list-cell :hover="false">-->
            <!--<view class="tui-line-cell self-flex">-->
            <!--<view class="tui-title self-flex-title">确认密码</view>-->
            <!--<input class="tui-input self-flex-content" maxlength="50" name="pwd2" placeholder="请输入确认密码" placeholder-class="phcolor"-->
            <!--type="text"/>-->
            <!--</view>-->
            <!--</tui-list-cell>-->
            <!--<tui-list-cell :hover="false">-->
            <!--<view class="tui-line-cell self-flex">-->
            <!--<view class="tui-title self-flex-title">区间</view>-->
            <!--<input class="tui-input self-flex-content" maxlength="50" name="range" placeholder="请输入3-20之间的数" placeholder-class="phcolor"-->
            <!--type="number"/>-->
            <!--</view>-->
            <!--</tui-list-cell>-->


            <!--下拉选择框 dropdownlist-->
            <!--<view class="uni-form-item uni-column">-->
                <!--<view class="title">报修类型</view>-->
                <!--<radio-group name="dataFrom.repaireName">-->
                    <!--<label>-->
                        <!--<radio value="教学楼报修"/>-->
                        <!--教学楼报修-->
                    <!--</label>-->
                    <!--<label>-->
                        <!--<radio value="公寓楼报修"/>-->
                        <!--公寓楼报修-->
                    <!--</label>-->
                <!--</radio-group>-->
            <!--</view>-->
            <tui-list-cell :hover="false" :last="true">
                <view class="tui-line-cell self-flex">
                    <view class="tui-title self-flex-title">报修楼类型</view>
                    <donger-picker class="picker" :range="name" v-model="dataFrom.repaireName" :value="dataFrom.repaireName" :props="repaireName"></donger-picker>
                </view>
            </tui-list-cell>
            <tui-list-cell :hover="false" :last="true">
                <view class="tui-line-cell self-flex">
                    <view class="tui-title self-flex-title">报修楼类型</view>
                    <donger-picker class="picker" @input="PickerChange" :range="picker" v-model="dataFrom.buildingId" :props="props" ref="dongerPicker"></donger-picker>
                </view>
            </tui-list-cell>
            <tui-list-cell :hover="false" :last="true">
                <view class="tui-line-cell self-flex">
                    <view class="tui-title self-flex-title">报修地点</view>
                    <donger-picker class="picker" :range="bdtables" v-model="dataFrom.buildingDetailId" :props="build"
                                    ref="dongerPicker"></donger-picker>
                </view>
            </tui-list-cell>
            <tui-list-cell :hover="false" :last="true">
                <view class="tui-line-cell self-flex">
                    <view class="tui-title self-flex-title">报修物品</view>
                    <donger-picker class="picker" :range="gtables" v-model="dataFrom.goodsId"
                                    :props="props" ref="dongerPicker"></donger-picker>
                </view>
            </tui-list-cell>
            <tui-list-cell :hover="false">
                <view class="tui-line-cell self-flex">
                    <view class="tui-title self-flex-title">房间号</view>
                    <input class="tui-input self-flex-content" maxlength="50" name="name" v-model="dataFrom.roomNum"
                           placeholder="请输入房间号，如403" placeholder-class="phcolor"
                           type="text"/>
                </view>
            </tui-list-cell>
            <tui-list-cell :hover="false" :last="true">
                <view class="tui-line-cell self-flex">
                    <view class="tui-title self-flex-title">备注</view>
                    <input class="tui-input self-flex-content" maxlength="50" name="amount"
                           v-model="dataFrom.repaireDes" placeholder="请输入备注信息" placeholder-class="phcolor"
                           type="text"/>
                </view>
            </tui-list-cell>

            <view class="tui-btn-box">
                <button class="btn-primary" formType="submit" hover-class="btn-hover" type="primary">Submit</button>
                <button class="btn-primary btn-gray" formType="reset" hover-class="btn-g ray-hover">Reset</button>
            </view>
        </form>

    </view>
</template>

<script>
    const form = require("../../../utils/form/formValidation");
    import tuiListCell from "@/components/list-cell/list-cell"
    import {getBuildingDel, getGoods, addRepaire} from '@/api/user/index'
    import dongerPicker from "@/components/donger-picker/donger-picker"
    // import dongerPicker2 from "@/components/donger-picker/donger-picker"
    // import dongerPicker3 from "@/components/donger-picker/donger-picker"
    // // 下拉框
    import tuiDropdownList from "@/components/dropdown-list/dropdown-list"
    import tuiIcon from "@/components/icon/icon"
    import tuiButton from "@/components/button/button"

    export default {
        components: {
            tuiListCell,
            tuiIcon,
            tuiButton,
            tuiDropdownList,
            dongerPicker,
            // dongerPicker2,
            // dongerPicker3
        },
        name: "formValidation",
        data() {
            return {
                build: {
                    label: 'buildName',
                    value: 'id'
                },
                props: {
                    label: 'name',
                    value: 'id'
                },
                repaireName: {
                    label: 'name',
                    value: 'value'
                },
                bdtables: [
                    {
                        id: '0',
                        buildName: '请选择'
                    }
                ],
                gtables: [
                    {
                        id: '0',
                        name: '请选择'
                    }
                ],
                name: [
                    {
                    value: "教学楼报修",
                    name: '教学楼报修'
                    },
                    {
                        value: "公寓楼报修",
                        name: '公寓楼报修'
                    }
                ],
                picker: [
                    {
                        id: '0',
                        name: '请选择'
                    },
                    {
                        id: '1',
                        name: '教学楼'
                    },
                    {
                        id: '2',
                        name: "公寓楼"
                    }
                ],
                dataFrom: {
                    repaireName: '',
                    buildingId: '',
                    buildingDetailId: '',
                    goodsId: '',
                    roomNum: '',
                    repaireDes: '',
                },
            }
        },
        methods: {
            PickerChange(e) {
                var that=this
                this.loading = true
                getBuildingDel(e).then(({data}) => {
                    that.loading = false
                    that.bdtables = data
                    console.log('bdtables', this.bdtables)
                })
                getGoods(e).then(({data}) => {
                    that.loading = false
                    that.gtables = data
                    console.log('gtables', this.gtables)
                })
            },
            formSubmit(e) {
                //表单规则
                let rules = [
                    // {
                    //     name: "name",
                    //     rule: ["required", "isChinese", "minLength:2", "maxLength:6"], //可使用区间，此处主要测试功能
                    //     msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
                    // },
                    // {
                    //     name: "sex",
                    //     rule: ["required"],
                    //     msg: ["请选择性别"]
                    // },
                    // {
                    //     name: "age",
                    //     rule: ["required", "isNum", "range:[0,150]"],
                    //     msg: ["请输入年龄", "请输入正确的年龄", "请输入正确的年龄范围：0-150"]
                    // },
                    // {
                    //     name: "mobile",
                    //     rule: ["required", "isMobile"],
                    //     msg: ["请输入手机号", "请输入正确的手机号"]
                    // },
                    // {
                    //     name: "email",
                    //     rule: ["required", "isEmail"],
                    //     msg: ["请输入邮箱", "请输入正确的邮箱"]
                    // },
                    // {
                    //     name: "idcard",
                    //     rule: ["required", "isIdCard"],
                    //     msg: ["请输入身份证号码", "请输入正确的身份证号码"]
                    // },
                    // {
                    //     name: "pwd",
                    //     rule: ["required", "isEnAndNo"],
                    //     msg: ["请输入密码", "密码为8~20位数字和字母组合"]
                    // },
                    // {
                    //     name: "pwd2",
                    //     rule: ["required", "isSame:pwd"],
                    //     msg: ["请输入确认密码", "两次输入的密码不一致"]
                    // },
                    {
                        name: "repaireDes",
                        rule: ["required", "isRepaireDes"],
                        msg: ["请输入备注", "不要超过10字"]
                    },
                    {
                        name: "roomNum",
                        rule: ["required", "isRoomNum"],
                        msg: ["请输入房间号", "请输入正确的房间号"]
                    }
                ];
                console.log("1111111",this.dataFrom.repaireName)
                //进行表单检查
                let repaire = {
                    repaireName: this.dataFrom.repaireName,
                    buildingId: +this.dataFrom.buildingId,
                    buildingDetailId: +this.dataFrom.buildingDetailId,
                    goodsId: +this.dataFrom.goodsId,
                    roomNum: this.dataFrom.roomNum,
                    repaireDes: this.dataFrom.repaireDes
                };
                // let checkRes = form.validation(formData, rules);
                // if (!checkRes) {
                    addRepaire(repaire).then(res => {
                        console.log("11111111",res);
                        this.tui.toast("添加成功", 2000, true);
                        this.formReset(e);
                        // setTimeout(() => {
                        //     uni.reLaunch({
                        //         url: '../my/my'
                        //     })
                        // }, 200);
                        // uni.navigateTo({
                        //     url: `/pages/user/orderDetail`,
                        //     animationType: 'pop-in',
                        //     animationDuration: 300
                        // });
                    })
                // } else {
                //     uni.showToast({
                //         title: checkRes,
                //         icon: "none"
                //     });
                // }
            },
            formReset(e) {
                console.log("清空数据")
            }
        }
    }
</script>


<style lang="css" scoped>
    @import "formValidation.css";
</style>

